<template>
    <div class="box">
        <div class="sousuo">
            <el-input class="sousuo-input" v-model="a" placeholder="请输入要搜索的关键词" />
            <el-button class="sousuo-btn" @click="search()">搜索</el-button>
        </div>
        <el-table :style="{display:showType}" :data="studentInfo.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
            <el-table-column prop="id" label="id" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column fixed="right" label="操作">

        <template #default="{ row }">
          <el-button type="text"
                     size="small"
                     @click="handleDetail(row)">查看</el-button>
          <el-button type="text"
                     size="small"
                     @click="handleEdit(row)">编辑</el-button>
          <el-button type="text"
                     size="small"
                     @click="handleDel(row)">删除</el-button>
          <el-button type="text"
                     @click="handleNew">新增</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!-- 新建/编辑弹框 -->
    <Dialog v-if="dialogShow"
            v-model:dialogShow="dialogShow"
            :rowInfo="rowInfo"
            :title="title"
            :arrayNum="studentInfo.length"
            @addRow="addRow"
            @editRow="editRow" />
    <!-- 详情弹窗 -->
    <Detail v-if="detailShow"
            :rowInfo="rowInfo"
            @closeDetail="closeDetail" />
    <div class="fenye">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     layout=" prev, pager, next"
                     :page-count="Math.ceil(studentInfo.length/pageSize)">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import { ElMessageBox } from 'element-plus'
import Dialog from './works2.vue'
import Detail from './work1.vue'
export default {
    components: { Dialog, Detail },
    setup() {
        const data = reactive({
            dialogShow: false, // 新增/编辑弹框
            tableData: [], //数据
            a: "",
            matchingList: [],
            showType: "",
            currentPage: 1, //默认显示第一页
            pageSize: 8, //默认每页显示10条
            detailShow: false, // 详情弹窗
            rowInfo: {}, // 新增/编辑的数据
            title: "", // 是新建还是修改
            studentInfo: [
                {
                    id: 1,
                    name: "星星",
                    sex: "女",
                    age: 18,
                },
                {
                    id: 2,
                    name: "李亮",
                    sex: "男",
                    age: 19,
                },
                {
                    id: 3,
                    name: "张亮",
                    sex: "男",
                    age: 19,
                },
                {
                    id: 4,
                    name: "李四",
                    sex: "男",
                    age: 19,
                },
                {
                    id: 5,
                    name: "张三",
                    sex: "男",
                    age: 13,
                },
                {
                    id: 6,
                    name: "王儿",
                    sex: "男",
                    age: 13,
                },
                {
                    id: 7,
                    name: "星星",
                    sex: "女",
                    age: 18,
                },
                {
                    id: 8,
                    name: "李亮",
                    sex: "男",
                    age: 19,
                },
                {
                    id: 9,
                    name: "张亮",
                    sex: "男",
                    age: 19,
                },
                {
                    id: 10,
                    name: "李四",
                    sex: "男",
                    age: 19,
                },
                {
                    id: 11,
                    name: "张三",
                    sex: "男",
                    age: 13,
                },
                {
                    id: 12,
                    name: "王儿",
                    sex: "男",
                    age: 13,
                },
            ],
        });

        const method = reactive({
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                data.pageSize = val; //动态改变
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                data.currentPage = val; //动态改变
            },
            handleNew() {
                data.title = "新增";
                data.rowInfo = {};
                data.dialogShow = true;
            },
            search() {
                data.matchingList = [];
                /*判断输入框的值是否为空*/
                if (data.a !== "") {
                    /*显示数据列表*/
                    data.showType = "block";
                    data.studentInfo.map((msg) => {
                        if (msg.id.indexOf(data.a) != -1) {
                            data.studentInfo = [];
                            data.studentInfo.push(msg);
                        }
                    });
                } else {
                    data.showType = "none";
                }
            },
            handleDetail(val) {
                data.detailShow = true;
                data.rowInfo = val;
            },
            handleEdit(val) {
                data.title = "修改";
                data.dialogShow = true;
                data.rowInfo = val;
            },
            handleDel(val) {
                ElMessageBox.confirm("你确定删除这个学生的信息吗?", "提示", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        method.handleSure(val);
                    })
                    .catch(() => {
                        // catch error
                    });
            },
            handleSure(val) {
                this.dialogVisible = false;
                const index = data.studentInfo.findIndex(
                    (item) => item.id === val.id
                );
                data.studentInfo.splice(index, 1);
            },
            // 添加行
            addRow(val) {
                data.studentInfo.push(val);
            },
            // 编辑行
            editRow(val) {
                let index = data.studentInfo.findIndex(
                    (item, index) => item.id === val.id
                );
                data.studentInfo.splice(index, 1, val);
            },
            // 关闭详情弹窗
            closeDetail() {
                data.detailShow = false;
            },
        });
        return { ...toRefs(data), ...method };
    },
};
</script>

<style lang="less" scoped>
.fenye {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
}
.sousuo {
  display: flex;
  width: 100%;
  height: 50px;
  .sousuo-btn {
    height: 100%;
    width: 100px;
  }
  .sousuo-input {
    height: 100%;
  }
}
</style>
